<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>ScrollablePane - mask</title>

	<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','ScrollablePane']"></script>
	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>

	<script type="text/javascript">
		require([
			"dojo/_base/connect",
			"dojo/dom",
			"dojo/dom-class",
			"dojo/ready",
			"dijit/registry",
			"dojox/mobile/parser",
			"dojox/mobile",
			"dojox/mobile/ScrollablePane",
			"dojox/mobile/ContentPane",
			"dojox/mobile/RoundRectCategory",
			"dojox/mobile/compat"
		]);
	</script>
	<style>
	h3 {
		margin-bottom: 0px;
	}
	.mblRoundRectList, .mblRoundRect, .myPane {
		margin: 5px 9px 7px 9px;
	}
	.myPane {
		background-color: white;
		padding: 8px;
		border-radius: 8px;
		color: black;
	}
	</style>
</head>
<body style="visibility:hidden;">
	<div id="view1" data-dojo-type="dojox.mobile.View">
		<h3 data-dojo-type="dojox.mobile.RoundRectCategory">RoundRectList</h3>
		<div data-dojo-type="dojox.mobile.ScrollablePane" data-dojo-props='height:"100px",roundCornerMask:true'>
			<ul data-dojo-type="dojox.mobile.RoundRectList">
				<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png"'>
					Slide
				</li>
				<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-2.png"'>
					Flip
				</li>
				<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-3.png"'>
					Fade
				</li>
				<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-4.png"'>
					Slide
				</li>
				<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-5.png"'>
					Flip
				</li>
				<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-6.png"'>
					Fade
				</li>
			</ul>
		</div>

		<h3 data-dojo-type="dojox.mobile.RoundRectCategory">RoundRect</h3>
		<div data-dojo-type="dojox.mobile.ScrollablePane" data-dojo-props='height:"100px",roundCornerMask:true'>
			<div data-dojo-type="dojox.mobile.RoundRect">
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
			</div>
		</div>

		<h3 data-dojo-type="dojox.mobile.RoundRectCategory">&lt;div&gt;</h3>
		<div data-dojo-type="dojox.mobile.ScrollablePane" data-dojo-props='height:"100px",roundCornerMask:true'>
			<div class="myPane">
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
			</div>
		</div>

		<h3 data-dojo-type="dojox.mobile.RoundRectCategory">ContentPane (inline)</h3>
		<div data-dojo-type="dojox.mobile.ScrollablePane" data-dojo-props='height:"100px",roundCornerMask:true'>
			<div data-dojo-type="dojox.mobile.ContentPane" class="myPane">
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
				Hello<br>
			</div>
		</div>

		<h3 data-dojo-type="dojox.mobile.RoundRectCategory">ContentPane (href)</h3>
		<div data-dojo-type="dojox.mobile.ScrollablePane" data-dojo-props='height:"100px",roundCornerMask:true'>
			<div data-dojo-type="dojox.mobile.ContentPane" class="myPane" data-dojo-props='href:"data/simple1.html"'>
			</div>
		</div>
	</div>
</body>
</html>
